<template>
  <div>
    <div class="d-flex flex-column gap-col-5">
      <span class="text-font-12 font-weight-400">{{ $t('label.im') }} :</span>
      <div class="tabs gap-row-8">
        <div
          v-for="(option, index) in options"
          :key="`option-${option.label}-${index}`"
          @click="() => (userProfile.gender = option.value)"
          :class="[userProfile.gender === option.value ? 'active' : '', 'dialog-btn']"
        >
          {{ $t(option.label) }}
        </div>
      </div>
    </div>
    <div class="d-flex flex-column gap-col-5 mt-4">
      <div>
        <span class="text-font-12 font-weight-400">{{ $t('label.intPpl') }}</span>
      </div>

      <div class="tabs gap-row-8">
        <div
          v-for="(option, index) in interestedInOptions"
          :key="`multi-option-${option.label}-${index}`"
          @click="toggleInterestedIn(option.value)"
          class="dialog-btn"
          :class="{
            active: isInteresting(option.value),
          }"
        >
          {{ $t(option.label) }}
        </div>
      </div>
      <div class="font-size-14 font-weight-500 text-graydisabled mt-2">{{ $t('content.mulChoice') }}</div>
      <div v-if="!!errMsg" class="font-size-12 font-weight-400 line-height-120 text-primary-x">
        {{ errMsg }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { $t } from '@/i18n'
import { GENDER, INTERESTED_IN } from '@/constant'

const props = defineProps({
  modelValue: { type: Object, required: true },
  gender: { type: Number, default: 1 },
  interestedIn: { type: Array, default: () => [1] },
  errMsg: { type: String, default: '' },
})

const emit = defineEmits(['update:modelValue'])

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

const options = ref([
  { label: 'gender.male', value: GENDER.MALE },
  { label: 'gender.female', value: GENDER.FEMALE },
  { label: 'gender.other', value: GENDER.OTHER },
])

const interestedInOptions = [
  { label: 'interestedIn.straight', value: INTERESTED_IN.STRAIGHT },
  { label: 'interestedIn.gay', value: INTERESTED_IN.GAY },
  { label: 'interestedIn.lesbian', value: INTERESTED_IN.LESBIAN },
  { label: 'interestedIn.trans', value: INTERESTED_IN.TRANS },
]

const userProfile = reactive({
  gender: props.gender,
  interestedIn: props.interestedIn,
})

watch(
  userProfile,
  (newVal) => {
    modelValue.value = newVal
  },
  { immediate: true },
)

const toggleInterestedIn = (value) => {
  const index = userProfile.interestedIn.indexOf(value)
  if (index === -1) {
    userProfile.interestedIn.push(value)
    userProfile.interestedIn.sort((a, b) => a - b)
  } else {
    if (userProfile.interestedIn.length > 1) {
      userProfile.interestedIn.splice(index, 1)
    }
  }
}

const isInteresting = (value) => userProfile.interestedIn.indexOf(value) > -1
</script>
<style lang="scss" scoped>
.dialog-btn {
  background-color: rgb(var(--v-theme-surface));
  padding: 0.375rem 1rem;
  border-radius: 3.125rem;
  margin-bottom: 0.5rem;
  &.active {
    color: rgb(var(--v-theme-primary));
    border-color: rgb(var(--v-theme-primary));
    border: 0.125rem solid;
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: start;
}
</style>
